<template>
  <div class="paymentSucess">
    <div class="bg">
      <div class="bgbox">
        <div class="price">
          <div class="icon">￥</div>
          <!-- {{order.pay_amount}} -->
          <div class="priceNum">{{order.pay_amount}}</div>
        </div>
        <div class="title">

          <!-- <van-image :src="require('../../assets/img/home/Tick.png')" fit="cover" /> -->
          <van-image :src="require('../../assets/img/home/Tick.png')" fit="cover"></van-image>

          <p>支付成功!</p>
        </div>
      </div>

    </div>
    <div class="box">
      <van-card :price="order.pay_amount" :title="order.service_name" :thumb="`${resourceURL}${order.top_pic}`" />
      <div class="detail">
        <div class="item">
          <p>订单编号</p>
          <p class="right">{{order.orderno}}</p>
        </div>
        <div class="item">

          <p>支付时间</p>
          <p class="right">{{$moment(order.pay_time*1000).format('YYYY-MM-DD HH:mm:ss')}}</p>
        </div>

        <div class="item">
          <p>预约时间</p>
          <p class="right">{{order.make_time}}</p>
        </div>
        <div class="item">
          <p>预约地址</p>
          <p class="right">{{`${order.p_c_a}${order.r_address}`}}</p>
        </div>
      </div>
      <!-- <div class="btnlist">
        <van-button round class="return" @click="$router.back()">返回</van-button>
        <van-button type="primary" round @click="jump">查看订单</van-button>
      </div> -->
      <!-- <van-submit-bar button-text="返回" @submit="jump" class="bottm" /> -->
      <div class="submit">
        <van-button type="primary" class="btn" round plain block @click="jump">返回</van-button>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  mixins: [],
  props: {

  },
  data () {
    return {

      detail: {},
      order: {},
      address: ''
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {

  },
  created () {
    this.orderserviceinfo()
  },
  methods: {

    //获取细节
    orderserviceinfo () {
      this.$axios
        .post(this.$api.orderserviceinfo, {
          params: {
            send_id: this.$route.query.send_id
          },
        })
        .then((res) => {

          if (res.data.code == 1) {
            this.order = res.data.data[0]
          }

          // this.order = res.data.data.order

        });
    },

    jump () {
      this.$router.back()
    }
  }
};
</script>
<style lang='less' scoped>
.submit {
  position: fixed;
  left: 0;
  bottom: 24px;
  display: flex;
  width: 100%;
  padding: 6px 16px;
  background-color: transparent;
  box-sizing: border-box;
  .btn {
    border: 1px solid #ff7733;
    color: #ff7733;
  }
}

.bg {
  width: 100%;
  height: 139px;
  background: linear-gradient(135deg, #ff7733 0%, #ff4133 100%);
  border-radius: 0px 0px 16px 16px;
  opacity: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .price {
    font-size: 30px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: flex-end;
    height: 40px;
    position: relative;
    .icon {
      font-size: 16px;
      position: absolute;
      top: 20px;
    }
    .priceNum {
      position: absolute;
      left: 18px;
      top: 10px;
      font-size: 30px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
    }
  }
  .title {
    display: flex;
    align-items: center;
    margin-top: 12px;
    p {
      margin-left: 6px;
      font-size: 20px;

      font-weight: bold;
      line-height: 0px;
      color: #ffffff;
    }
    /deep/ .van-image {
      width: 26px;
      height: 26px;
    }
  }
}
.paymentSucess {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;

  background: #f6f6f6;
}
.box {
  position: relative;
  z-index: 1;
  width: 343px;
  background: #ffffff;
  margin: 0 auto;
  border-radius: 6px 6px 6px 6px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  .van-card {
    width: 100%;
    padding: 0;
    background: transparent;
    border-bottom: 1px dashed rgba(25, 23, 20, 0.1);
  }
  .price {
    margin-top: 70px;
    border-bottom: 1px dashed rgba(25, 23, 20, 0.102);
    text-align: center;
    width: 100%;
    div {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;

      color: #191714;
      margin-bottom: 36px;
    }
  }
  .detail {
    margin-top: 30px;

    width: 100%;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #191714;
    p {
      margin: 0;
    }
    .right {
      color: rgba(4, 4, 4, 0.6);
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
      max-width: 196px;
    }
    .item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
    }
  }
}
.van-submit-bar {
  background: transparent;
}
.van-submit-bar__button--danger {
  width: 100%;
}
/deep/.van-button {
  border-radius: 22px 22px 22px 22px;
  opacity: 1;
  border: 1px solid #ff7733;
  color: #ff7733;
  background: #ffffff;
}
</style>